<template>
  <div class="statistics-picture">
    <svg class="icon backicon" aria-hidden="true">
      <use xlink:href="#icon-tupian2"></use>
    </svg>

    <div style="
              font-family: Lato,sans-serif;
              font-size: 30px;
              width: 100%;
              height: 65%;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: flex-end;">
      <div style="width: 30%">
        <svg class="icon" aria-hidden="true" style="width: 55px;height: 55px;">
          <use xlink:href="#icon-tupian2"></use>
        </svg>
      </div>
      <div style="display: flex;flex-direction: column;width: 60%;text-align: left;">
        <div>
          <countTo style="font-weight: bold;"
                   :startVal='0' :endVal='statistics.picture.allCount' :duration='2000'></countTo>
          <span style="font-size: 20px;font-weight: bold">P</span>
        </div>
        <span style="font-size: 15px;">Picture Num</span>
      </div>
    </div>

    <div class="statis-divider" style="border-top: 2px solid;width: 90%;margin-top: 15px;"></div>

    <div style="
              width: 100%;
              height: 35%;
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              align-items: center;">
      <span style="font-size: 20px;font-weight: bold;width: 45%;">Size : </span>
      <span style="font-size: 18px;width: 55%;text-align: left;font-weight: 500">{{statistics.picture.allSize}}</span>
    </div>
  </div>
</template>

<script>
  import { statistics } from '../api/picture.js'
  import {convertFileSize} from "../assets/js/utils/util"
  import countTo from 'vue-count-to'

  export default {
    name: "statisticePicture",
    data () {
      return {
        statistics: {
          picture: {
            allSize: 0,
            allCount: 0
          }
        }
      }
    },
    computed: {
      isLogin  () {return this.$store.state.config.login.loginState === this.$GLOBAL.LOGIN.STATE.SUCCESS},
    },
    methods: {
      findStatis () {
        statistics().then(resp => {
          this.statistics.picture.allSize = convertFileSize(resp.data.pictureSize)
          this.statistics.picture.allCount = resp.data.pictureCount
          let os = {
            type : resp.data.osType
          }
          this.$store.commit('SET_OS',os)
        })
      },
    },
    mounted() {
      if (this.isLogin) {
        this.findStatis()
      }
    },
    components: {
      countTo
    }
  }
</script>

<style scoped lang="scss">

  .statistics-picture {
    @include flex(column,space-around,center);
    @include boxBase(100%,50%);
    z-index: 999;
    font-family: Lato,sans-serif;
    position: relative;
    margin-top: 16px;
    overflow: hidden;
    border-radius: 10px;
    transition: box-shadow 0.5s,width 0.2s;
    background-color: #f96e0e;
    [data-theme="night"] & {
      background-color: #6b2d07;
    }

    .backicon {
      @include boxBase(200px,200px);
      position: absolute;
      left: -80px;
      bottom: -40px;
      color: rgba(255,255,255,0.1);
      transition: left 0.2s;
    }

    &:hover {
      width: 150%;
      .backicon {
        left: -100px;
      }
    }
  }
</style>
